<template>
	<view class="container" :style="{'--color': vuex_config.themeColor1, '--price': vuex_config.price }">
		<!--     easing-function="{{easingFunction}}"
	 -->
		<swiper :circular="circular" easing-function="default" 
			class="video-swiper" vertical current="0" :duration="500"
			@animationfinish="animationfinish">
			<!-- curQueue 循环会导致video重新插入，objectFit 不可变更 -->
			<!--         enable-play-gesture：双击切换播放/暂停 -->
			<swiper-item v-for="(item, index) in curQueue" :key="index">
				<video
					:id="'video_' + index"
					class="video_item"
					:loop="true"
					enable-progress-gesture
					:show-center-play-btn="false"
					:controls="false"
					:src="item.url"
					:object-fit="item.objectFit || 'contain'"
					@play="onPlay"
					@pause="onPause"
					@ended="onEnded"
					@error="onError"
					@timeupdate="onTimeUpdate"
					@waiting="onWaiting"
					@progress="onProgress"
					@loadedmetadata="onLoadedMetaData"
					@click="pauseVideo(index)"
				></video>
				<view class="play_icon iconfont iconfont-e65f" v-if="videoStatus">
					
				</view>
				<view class="other_main">
					<view class="ti_box">
						<view class="vsi_title u-line-1">{{item.name}}</view>
						<view class="vsi_text">{{item.title}}</view>
					</view>
					<view class="icon_box">
						<view class="icon_item" @click="openpopup" v-if="item.pro_list">
							<view class="big_icon iconfont iconfont-e627"></view>
						</view>
						<view class="icon_item">
							<view class="big_icon iconfont iconfont-e61b"></view>
							<view class="num">{{numFilter(item.view)}}</view>
						</view>
						<button class="icon_item u-reset-button" open-type="share" @click="$share">
							<view class="img_icon iconfont iconfont-e60f"></view>
							<view class="num">{{numFilter(item.share)}}</view>
						</button>
						<!-- <view class="icon_item" @click="call_phone">
							<view class="img_icon iconfont iconfont-e68e"></view>
						</view> -->
					</view>
				</view>
			</swiper-item>
		</swiper>
		<u-mask :show="shareVisible" z-index="100" :zoom="false" @click="shareVisible = false">
			<view class="h5-show-tips">请点击分享</view>
		</u-mask>
		<u-popup v-model="show" mode="bottom" border-radius='32' closeable safe-area-inset-bottom>
			<view class="product-box">
				<view class="pb-item" v-for="(item,index) in productList" :key='index' @click="opendetail(item)">
					<image class="item-img" :src="item.logo" mode=""></image>
					<view class="item-right">
						<text class="u-line-2" style="padding-top: 10rpx;">{{item.name}}</text>
						<view class="right-price" style="padding-bottom: 10rpx;">
							<text class="num">￥{{item.price}}</text>
							<view class="price-btn">去抢购</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	// 有bug，数量不是3的倍数，就会少一条或者重复多一条
export default {
	props: {
		dataList: {
			type: Array,
			default: []
		}
	},
	computed:{
		numFilter () {
			return (num)=>{
				// return num >= 1e3 && num < 1e4 ? (num / 1e3).toFixed(1) + 'k' : num >= 1e4 ? (num / 1e4).toFixed(1) + 'w' : num
				return num >= 1e4 ? (num / 1e4).toFixed(1) + 'w' : num
			}
		}
	},
	data() {
		return {
			curQueue: [
				// { url: 'https://v-cdn.zjol.com.cn/276982.mp4' },
				// { url: 'https://v-cdn.zjol.com.cn/280443.mp4' },
				// { url: 'https://v-cdn.zjol.com.cn/276984.mp4' },
				// { url: 'https://v-cdn.zjol.com.cn/276985.mp4' },
				// { url: 'https://v-cdn.zjol.com.cn/276986.mp4' }
			], // 当前视频列表
			nextQueue: [],
			prevQueue: [],
			videoContexts: [], // curQueue视频对应的对象
			circular: false,
			videoStatus: false, // 是否暂停
			lastIndex: 0, // 上一次播放的位置
			changeIndex: 2, // 对应current初始0，lastIndex 0
			invalidUpIndex: 0,
			invalidDownIndex: 1,
			shareVisible:false,// H5分享弹窗
			show:false,
			productList:[],
			currentItem:'',
			modeObj: {
				1: 4,
				2: 3,
				3: 4,
				4: 1,
				5: 6
			},
		};
	},
	mounted() {
		let arr = [1, 2, 3];
		arr.forEach((item, index) => {
			let obj = uni.createVideoContext(`video_${index}`, this);
			this.videoContexts.push(obj);
		});
	},
	watch: {
		dataList: {
			handler(newVal) {
				if (newVal && newVal[0]) {
					this.nextQueue = this.nextQueue.concat(newVal);
					if (this.curQueue.length === 0&&this.nextQueue.length >0) {
						this.curQueue = this.nextQueue.splice(0, 3);
						this.currentItem = this.curQueue[this.lastIndex]
						this.$nextTick(() => {
							this.playCurrent(this.lastIndex);
							this.initproduct()
						});
					}
				}
			},
			immediate: true
		}
	},

	methods: {
		onPlay(e) {
			this.videoStatus = false
		},
		onPause(e) {
		},
		openpopup(){
			this.show = true
			this.initproduct()
		},
		initproduct(){
			this.$resPost('GetInfotainmentInfo', {
					pk_id:this.currentItem.pk_id,
				}).then(res=>{
					this.productList = res.data.pro_list
				})
		},
		opendetail(item){
			this.$toProd({...item,prodType:this.modeObj[this.currentItem.mode]})
		},
		onEnded(e) {},
		onError(e) {},
		onTimeUpdate(e) {
			let {currentTime, duration} = e.detail
			this.$u.vuex('process', parseInt(currentTime / duration * 100));
		},
		onWaiting(e) {
			console.log('缓冲中...没有缓冲结束动作吗')
		},
		onProgress(e) {},
		onLoadedMetaData(e) {},
		// 点击 暂停、播放
		pauseVideo(current) {
			try {
				let item = this.videoContexts[current];
				if (this.videoStatus) {
					item.play();
				} else {
					item.pause();
				}
				this.videoStatus = !this.videoStatus;
			} catch (e) {
				console.log(e);
			}
		},
		// 滑动结束
		animationfinish(e) {
			let current = e.detail.current;
			let diff = current - this.lastIndex; //
			// 0：滑到一半又不滑了 1:向上滑动加载下一个视频   -1：向下滑动查看上一个视频
			if (diff === 0) return;
			this.lastIndex = current;
			this.playCurrent(current);
			var direction = diff === 1 || diff === -2 ? 'up' : 'down'; // 我也不明白为什么有可能等于-2
			if (direction === 'up') {
				// 上滑
				if (this.invalidDownIndex === 0) {
					let newChangeIndex = (this.changeIndex + 1) % 3;
					var add = this.nextQueue.shift(); // 删除第一个元素并返回该元素
					if (this.nextQueue.length < 4) {
						this.$emit('loadMore');
					}
					var remove = this.curQueue[newChangeIndex];
					if (add) {
						this.prevQueue.push(remove);
						this.curQueue[newChangeIndex] = add;
						this.changeIndex = newChangeIndex;
					} else {
						this.invalidUpIndex += 1;
					}
				} else {
					this.invalidDownIndex -= 1;
				}
			} else {
				if (this.invalidUpIndex === 0) {
					var _remove = this.curQueue[this.changeIndex];
					var _add = this.prevQueue.pop(); // 删除最后元素并返回该元素
					if (_add) {
						this.curQueue[this.changeIndex] = _add;
						this.nextQueue.unshift(_remove);
						this.changeIndex = (this.changeIndex - 1 + 3) % 3;
					} else {
						this.invalidDownIndex += 1;
					}
				} else {
					this.invalidUpIndex -= 1;
				}
			}
			var circular = true; // 允许无缝衔接滑到第一个swiper-item
			if (this.nextQueue.length === 0 && current !== 0) {
				circular = false;
			}
			if (this.prevQueue.length === 0 && current !== 2) {
				circular = false;
			}
			this.circular = circular;
			this.currentItem = this.curQueue[current]
		},
		// 播放当前项,关闭其他项
		playCurrent(current) {
				this.videoContexts.forEach(function(ctx, index) {
					index !== current ? ctx.pause() : ctx.play();
				});
		},
		// 分享
		$share() {
			// #ifdef H5
			this.shareVisible = true;
			// #endif
		},
		// 客服电话
		call_phone () {
			let phone = this.vuex_business.custom_tel;
			if(phone){
				uni.makePhoneCall({
				    phoneNumber: phone + ''
				});
			}
		}
	}
};
</script>

<style scoped lang="scss">
.container {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
}

.video-swiper {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
}

.video_item {
	display: block;
	height: 100%;
	width: 100%;
	padding: 0;
	margin: 0;
}
.video-swiper-item {
	position: relative;
}
.play_icon{
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	opacity: .4;
	color: #fff;
	font-size: 90rpx;
}
.other_main{
	position: absolute;
	bottom: 92rpx;
	left: 0;
	width: 100%;
	.ti_box {
		padding: 0 160rpx 20rpx 26rpx;
		.vsi_title {
			color: #fff;
		}
		.vsi_text {
			color: #fff;
			font-size: 26rpx;
			margin-top: 14rpx;
		}
	}
	.icon_box{
		position: absolute;
		right: 0;
		bottom: 80rpx;
		padding: 0 26rpx;
		.icon_item{
			color: #fff;
			text-align: center;
			margin-top: 32rpx;
			.big_icon{
				font-size: 42rpx;
			}
			.img_icon{
				font-size: 52rpx;
			}
			.num{
				margin-top: 8rpx;
				font-size: 26rpx;
			}
		}
	}
}
.product-box{
		width: 100%;
		padding: 50rpx 26rpx 0;
		height: 800rpx;
		.pb-item{
			width: 100%;
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;
			.item-img{
				width: 200rpx;
				height: 180rpx;
				border-radius: 10rpx;
				margin-right: 20rpx;
			}
			.item-right{
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				width: 80%;
				height: 180rpx;
				.right-price{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.num{
						color:var(--price) ;
					}
					.price-btn{
						width: 120rpx;
						height: 60rpx;
						line-height: 60rpx;
						color: #fff;
						background-color:var(--color) ;
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: 8rpx;
					}
				}
			}
		}
	}
</style>
